<template>
	<div class="cps-view cps-view-tabel">

		<div class="tableView" style="width: 1029px;">
			<ux-grid ref="singleTable" :data="prposTabelData" :header-cell-style="{
				color: 'rgba(0, 0, 0, 0.85)',
				fontSize: '14px',
				textAlign: 'left',
				fontWeight: 'bold',
				padding: 0,
				height: '32px',
			}" :cell-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '14px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
			}" :row-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '13px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
			}" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" :max-height="tableHeight"
				v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
				:element-loading-text="$t('message.bhView.loading')" :checkbox-config="{
					showHeader: false,
				}" @selection-change="selectChange">
				<template slot="empty"> No data </template>

				<ux-table-column property="wrkclsname" title="" width="40" :align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.index }}</p>
					</template>
				</ux-table-column>
				<ux-table-column property="wrkclsname" :title="$t('message.BSCps.pdfCps.tableHeads.title_1')"
					width="145" align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.prName }}</p>
					</template>
				</ux-table-column>

				<ux-table-column property="wrkclsname" :title="$t('message.BSCps.pdfCps.tableHeads.title_2')"
					width="145" align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.paName }}</p>
					</template>
				</ux-table-column>
				<ux-table-column property="wrkclsname" :title="$t('message.BSCps.pdfCps.tableHeads.title_3')" width="50"
					align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.posNo }}</p>
					</template>
				</ux-table-column>
				<!-- <ux-table-column property="wrkclsname" type="checkbox" width="40">
				</ux-table-column> -->
				<ux-table-column property="wrkclsname" width="37" align="center">
					<template slot-scope="scope">
						<p style="pointer-events: none;text-align: center;">
							<el-checkbox v-model="scope.row.typicalFlg"></el-checkbox>
						</p>
					</template>
				</ux-table-column>

				<ux-table-column property="wrkclsname" :title="$t('message.BSCps.pdfCps.tableHeads.title_4')"
					width="150" align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.mtrClsName }}</p>
					</template>
				</ux-table-column>
				<ux-table-column property="wrkclsname" :title="$t('message.BSCps.pdfCps.tableHeads.title_5')"
					width="150" align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.mtrChrName }}</p>
					</template>
				</ux-table-column>
				<ux-table-column property="wrkclsname" :title="$t('message.BSCps.pdfCps.tableHeads.title_6')"
					width="150" align="center">
					<template slot-scope="scope">
						<p class="tr">{{ scope.row.drwThck }}</p>
					</template>
				</ux-table-column>
				<ux-table-column :title="$t('message.BSCps.pdfCps.tableHeads.title_7')" width="150" align="center">
					<template slot-scope="scope">
						<p class="tc" style="text-align: center;">{{ scope.row.clcThck }}</p>
					</template>
				</ux-table-column>
			</ux-grid>
		</div>


		<div style="width: 1004px;" :class="acitveIndex == -1 || !$hasEditPermission('/BHView') ? 'maskDisabled1' : ''">
			<div :class="acitveIndex == -1 || !$hasEditPermission('/BHView') ? 'maskDisabled2' : ''">
				<div class="rowList">
					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label100 }}
							</span>
							<div class="flx">
								<el-input class="leftS orange" v-model="handRow.posNo"
									@input="handRow.posNo = Number($setMyNum(handRow.posNo, '3 - 0'))"></el-input>
								<el-select v-model="handRow.prName" class="ipt orange" placeholder=" ">
									<el-option v-for="item in selectList.prtList" :key="item.key" :label="item.label"
										:value="item.label">
									</el-option>
								</el-select>
							</div>
						</div>

						<div class="item">
							<span class="label">
								{{ Lab.label117 }}
							</span>
							<el-radio v-model="handRow.typical" label="1">{{ $t('message.BSCps.pdfCps.Row.rad1')
								}}</el-radio>
							<el-radio v-model="handRow.typical" label="0">{{ $t('message.BSCps.pdfCps.Row.rad2')
								}}</el-radio>
						</div>
					</div>

					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label101 }}
							</span>
							<el-select v-model="handRow.paName" class="ipt" placeholder=" ">
								<el-option v-for="item in selectList.partsList" :key="item.key" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</div>

						<div class="item">
							<span class="label">
								{{ Lab.label107 }}
							</span>
							<div class="flx">
								<!-- <el-select v-model="test" class="ipt" placeholder=" ">
							<el-option v-for="item in selTest" :key="item.key" :label="item.val" :value="item.val">
							</el-option>
						</el-select> -->
								<el-input v-model="handRow.vol" class="ipt tr"
									@input="handRow.vol = $setMyNum(handRow.vol, '5 - 0')"></el-input>
								<span class="rightS">
								</span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label103 }}
							</span>
							<el-select v-model="handRow.mtrClsCode" class="ipt" placeholder=" ">
								<el-option v-for="item in selectList.mtrClsList" :key="item.key" :label="item.label"
									:value="item.key">
								</el-option>
							</el-select>
						</div>

						<div class="item">
							<span class="label">
								{{ Lab.label108 }}
							</span>
							<div class="flx">
								<!-- <el-select v-model="test" class="ipt" placeholder=" ">
							<el-option v-for="item in selTest" :key="item.key" :label="item.val" :value="item.val">
							</el-option>
						</el-select> -->
								<el-input v-model="handRow.wgt" class="ipt tr"
									@input="handRow.wgt = $setMyNum(handRow.wgt, '6 - 0')"></el-input>
								<span class="rightS">
									{{ $t('message.public.Kg') }}
								</span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label104 }}
							</span>
							<el-input v-model="handRow.mtrChrName" class="ipt"
								@input="handRow.mtrChrName = $setMaxLength(handRow.mtrChrName, 20)">
							</el-input>
						</div>

						<div class="item">
							<span class="label">
								{{ Lab.label109 }}
							</span>
							<div class="flx">
								<!-- <el-select v-model="test" class="ipt" placeholder=" ">
							<el-option v-for="item in selTest" :key="item.key" :label="item.val" :value="item.val">
							</el-option>
						</el-select> -->
								<el-input v-model="handRow.drwThck" class="ipt tr"
									@input="handRow.drwThck = $setMyNum(handRow.drwThck, '3 - 2')"></el-input>
								<span class="rightS">{{ $t('message.public.mm') }}</span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label105 }}
							</span>
							<el-input v-model="handRow.lngName" class="ipt"
								@input="handRow.lngName = $setMaxLength(handRow.lngName, 20)">
							</el-input>
						</div>

						<div class="item">
							<span class="label">
								{{ Lab.label110 }}
							</span>
							<div class="flx">
								<!-- <el-select v-model="test" class="ipt" placeholder=" ">
							<el-option v-for="item in selTest" :key="item.key" :label="item.val" :value="item.val">
							</el-option>
						</el-select> -->
								<el-input v-model="handRow.clcThck" class="ipt tr"
									@input="handRow.clcThck = $setMyNum(handRow.clcThck, '3 - 2')"></el-input>
								<span class="rightS">{{ $t('message.public.mm') }}</span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label106 }}
							</span>
							<el-select v-model="handRow.sizCode" class="ipt" placeholder=" ">
								<el-option v-for="item in selectList.sizList" :key="item.key" :label="item.label"
									:value="item.key">
								</el-option>
							</el-select>
						</div>

						<div class="item">
							<span class="label">
								{{ Lab.label111 }}
							</span>
							<div class="flx">
								<!-- <el-select v-model="test" class="ipt" placeholder=" ">
							<el-option v-for="item in selTest" :key="item.key" :label="item.val" :value="item.val">
							</el-option>
						</el-select> -->
								<el-input v-model="handRow.crrThck" class="ipt tr"
									@input="handRow.crrThck = $setMyNum(handRow.crrThck, '3 - 2')"></el-input>
								<span class="rightS">{{ $t('message.public.mm') }}</span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="long">
							<span class="label">
								{{ Lab.label112 }}
							</span>
							<el-input v-model="handRow.measureM" class=""
								@input="handRow.measureM = $setMaxLength(handRow.measureM, 50)">
							</el-input>
						</div>
					</div>
					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label113 }}
							</span>
							<el-select v-model="handRow.radio" class="ipt" placeholder=" ">
								<el-option v-for="item in selectList.radioList" :key="item.key" :label="item.label"
									:value="item.key">
								</el-option>
							</el-select>
						</div>

						<div class="item">
							<span class="label">
								{{ Lab.label115 }}
							</span>
							<el-radio v-model="handRow.hetCode" label="1">{{ $t('message.BSCps.pdfCps.Row.rad3')
								}}</el-radio>
							<el-radio v-model="handRow.hetCode" label="2">{{ $t('message.BSCps.pdfCps.Row.rad4')
								}}</el-radio>
						</div>
					</div>
					<div class="row">
						<div class="item">
							<span class="label">
								{{ Lab.label114 }}
							</span>
							<el-select v-model="handRow.mkrCode" class="ipt" placeholder=" ">
								<el-option v-for="item in selectList.mkrList" :key="item.key" :label="item.label"
									:value="item.key">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="row">
						<div class="long">
							<span class="label">
								{{ Lab.label116 }}
							</span>
							<el-input v-model="handRow.note" class=""
								@input="handRow.note = $setMaxLength(handRow.note, 30)">

							</el-input>
						</div>
					</div>
				</div>
			</div>
		</div>



	</div>
</template>

<script>
import $ from "jquery";
import { getPartsStyleComBox, getPartsStyle, getPartsStyleLabel } from "@/api/api";
import EventBus from "@/eventBus/bus";
import { getLocalStorage } from "@/utils/storage";
import _ from 'lodash-es';
export default {
	name: "PDFCps",
	data() {
		return {
			userData: getLocalStorage('userData'),
			prposTabelData: [],
			prposTabelDataClone: [],
			tableHeight: 230,
			loading: false,
			test: "",
			selectList: [],
			contentData: [],
			handRow: {},

			selTest: [{}],//可删测试

			acitveIndex: -1,
			Lab: {}
		};
	},
	components: {},
	watch: {
		macNamebValue: {
			deep: true,
			handler: function (newV, oldV) {
				this.initFn();
			},
		},
		handRow: {
			deep: true,
			handler: function (newV, oldV) {
				// this.changePrnCode(newV.prName);
				// 选择部位，重新获取下拉框
				try {
					let item = this.selectList.prtList.filter(item => item.label == newV.prName)[0];
					console.log(item);
					this.getSelectList(item.key)
				} catch (error) {
					//
				}
			},
		},
		prposTabelData: {
			deep: true,
			handler: function (newV, oldV) {
				console.log(newV);
				// 	prName: '上鏡',//	是	string	列表 部位 3
				// 	paName: '',//	是	string	列表 部品 4
				// 	posNamCode: 1,//	是	int	8
				// 	prtNamCode: 1,//	是	int	9
				// 部位部品的key和label都要传，所以监听，一个变化同时修改另一个值
				// <el-select v-model="handRow.mtrClsCode" class="ipt" placeholder=" ">
				// {/* <el-option v-for="item in selectList.mtrClsList" :key="item.key" :label="item.label" */}
				// 可能筛选条件，筛选不到，try——防止报错，终端后面的筛选
				this.prposTabelData.forEach(row => {
					try {
						row.typicalFlg = row.typical == 1 ? true : false;
						row.typical = row.typicalFlg ? '1' : '0';
					} catch (error) {
						console.log(error);
					}
					try {
						let item = this.selectList.prtList.filter(item => item.label == row.prName)[0];
						console.log(item);
						row.posNamCode = item.key;
					} catch (error) {
						console.log(error);
					}
					try {
						let item1 = this.selectList.partsList.filter(item => item.label == row.paName)[0];
						row.prtNamCode = item1.key;
					} catch (error) {
						console.log(error);
					}
					try {
						let item2 = this.selectList.mtrClsList.filter(item => item.key == row.mtrClsCode)[0];
						row.mtrClsName = item2.label;
					} catch (error) {
						console.log(error);
					}
				});

				this.$emit('DataChangeFn', !_.isEqual(this.prposTabelData, this.prposTabelDataClone))

			},
		},
	},
	computed: {
		macNamebValue() {
			return this.$store.state.macNameb;
		},
	},
	methods: {
		handleCurrentChange(val) {
			this.handRow = val;
			this.prposTabelData.forEach((item, index) => {
				if (item.index == val.index) {
					this.acitveIndex = index;
				}
			});
			console.log(this.acitveIndex);
		},
		// 多选框的值
		selectChange(val) {
			console.log(val);
		},

		// 削除当前行，并设置新的高亮
		tableDataDel() {
			// if (this.prposTabelData.length == 1) {
			// 	this.$message({
			// 		type: 'warning',
			// 		message: '保留一组数据'
			// 	})
			// 	return
			// }


			this.prposTabelData.splice(this.acitveIndex, 1);
			if (this.acitveIndex >= this.prposTabelData.length) {
				this.acitveIndex = this.prposTabelData.length - 1
			}
			this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.acitveIndex]);
			this.handRow = this.prposTabelData[this.acitveIndex];

			if (this.prposTabelData.length == 0) {
				this.handRow = {}
			}
		},
		tableDataAdd() {
			let tempIndex = 1;
			if (this.prposTabelData.length != 0) {
				tempIndex = this.prposTabelData[this.prposTabelData.length - 1].index + 1;
			}
			let testData = {
				index: tempIndex,
				prName: '',//	是	string	列表 部位 3
				paName: '',//	是	string	列表 部品 4
				posNo: tempIndex,//	是	int	列表 序号 1
				typical: '1',//	是	int	列表 复选框 2 0:不选中、1:选中
				mtrChrName: '',//	是	string	列表 材质名称 5
				drwThck: '',//	是	decimal	列表 画面肉厚 6
				clcThck: '',//	是	decimal	列表 计算肉厚 7
				posNamCode: 0,//	是	int	8
				prtNamCode: 0,//	是	int	9
				mtrClsCode: 0,//	是	int	10
				lngName: '',//	是	string	11
				sizCode: 0,//	是	int	12
				measureM: '',//	是	string	13
				radio: 0,//	是	int	14
				mkrCode: 0,//	是	int	15
				note: '',//	是	string	16
				vol: '',//	是	string	18
				wgt: '',//	是	string	19
				crrThck: '',//	是	string	20
				hetCode: '2',//	是	int	21 1=是 2=否
				prtCode: 1,//	是	int	99
				dmgCode: this.$store.state.macCode,//	是	int	98
			}
			this.prposTabelData.push(testData);
			this.$refs.singleTable.setCurrentRow(testData);
			this.handRow = testData;
			this.acitveIndex = this.prposTabelData.length - 1;
		},

		//initFn
		async getData() {
			await this.getLabelFn();
			let dataJson = {
				DmgCode: this.$store.state.macCode,//	是	int	种别Code
			}
			let res = await getPartsStyle(dataJson);

			this.prposTabelData = _.cloneDeep(res.data.data);
			this.prposTabelDataClone = _.cloneDeep(res.data.data);
			if (res.data.data.length == 0) {
				this.$nextTick(function () {
					this.$emit('isGetAgain', true)
					this.prposTabelData = [];
					this.prposTabelDataClone = [];
					this.handRow = {};
					this.acitveIndex = -1;
				});
				return
			}
			console.log(res);
			this.prposTabelData.forEach((item, index) => {
				item.index = index + 1;
				item.mtrClsName = this.selectList.mtrClsList.filter(i => i.key == item.mtrClsCode)[0].label;

				item.typicalFlg = item.typical == 1 ? true : false;
			});

			this.prposTabelDataClone.forEach((item, index) => {
				item.index = index + 1;
				item.mtrClsName = this.selectList.mtrClsList.filter(i => i.key == item.mtrClsCode)[0].label;

				item.typicalFlg = item.typical == 1 ? true : false;
			});

			this.$refs.singleTable.setCurrentRow(this.prposTabelData[0]);
			this.handRow = this.prposTabelData[0];
			this.acitveIndex = 0;
			this.$emit('isGetAgain', false)
			this.$emit('DataChangeFn', false)
		},
		async getSelectList(PrnCode) {
			let dataJson = {
				CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,//	是	int	种别Code
				PrnCode
			}
			let res = await getPartsStyleComBox(dataJson);
			this.selectList = res.data.data;
		},

		async getLabelFn() {
			let dataJson = {
				CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,//	是	int	种别Code
			}
			let res = await getPartsStyleLabel(dataJson);
			res.data.data.forEach(item => {
				this.Lab['label' + item.key] = item.label;
			});
		},
		initFn() {
			this.getSelectList();
			this.getData();
		}
	},
	created() { },
	mounted() {
		// EventBus.$on("clickRightTable", (name) => {
		this.initFn();
		// });
	},
	beforeDestroy() {
		EventBus.$off("clickRightTable");
	},
	destroyed() { }
};
</script>
<style lang="scss" scoped>
.cps-view {
	width: 100%;
	max-height: calc(100% - 41px);
	// overflow: hidden;
	overflow: auto;
	// overflow-x: auto;
	border: 1px solid #c3c3c3;

	.content-view {
		width: 1020px;
		padding: 16px;
	}

	.rowList {
		padding: 16px;
	}

	.title-view {
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		color: rgba(0, 0, 0, 0.85);
		font-weight: bold;
		border: 1px solid #c3c3c3;
		border-bottom: 0 none;
	}

	.row {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0 0 0;

		.item,
		.long {
			width: 48%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.flx {
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;

				.leftS {
					max-width: 70px;
					margin-right: 20px;

					::v-deep .el-input__inner {
						display: block;
						height: 32px;
						max-width: 70px;
						line-height: 32px;
						padding: 0 20px;
						border: 1px solid #D9D9D9;
						// background-color: #FFF;
						border-radius: 5px;
						text-align: center;
					}
				}

				.rightS {
					display: block;
					height: 100%;
					//   margin-left: 10px;
					padding-right: 20px;
				}
			}

			.message-flex {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.message-label {
					width: 40px;
				}

				::v-deep .el-radio {
					margin-right: 14px;
				}
			}

			.label {
				//     min-width: 96px;
				min-width: 140px;
				text-align: left;
			}

			.ipt {
				//     width: 368px;
				width: 83%;
				height: 32px;

				::v-deep .el-input__inner {
					width: 100%;
					height: 32px;
				}

				::v-deep .el-input__inner:focus {
					border: 1px solid #dcdfe6;
				}

				::v-deep .el-input__icon {
					line-height: 32px;
					color: #909399;
				}

				::v-deep .el-input__suffix {
					width: 32px;
					right: 0;
					background: #dee0e3;
				}
			}

			.picker {
				width: 130px;

				::v-deep .el-input__inner {
					width: 130px;
				}

				::v-deep .el-input__suffix {
					background: transparent;
				}
			}

			.orange {
				::v-deep .el-input__inner {
					background: #ffdeac;
				}
			}

			.yellow {
				::v-deep .el-input__inner {
					background: #ffffe1;
				}
			}

			.textarea {
				::v-deep .el-textarea__inner {
					resize: none;
				}
			}

			.right {
				::v-deep .el-input__inner {
					text-align: right;
				}
			}
		}

		.long {
			width: 100%;

			::v-deep .el-input__inner {
				width: 100%;
				height: 32px;
			}

			::v-deep .el-input__inner:focus {
				border: 1px solid #dcdfe6;
			}
		}
	}

	.footer-message {
		width: 100%;
		height: 30px;
		border: 1px solid #c3c3c3;
		border-top: 0 none;
		display: flex;
		align-items: center;
		padding: 0 10px;
		background: #edeeef;
		color: #000;
	}

	.footer {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 14px 0 0 0;

		button {
			width: 82px;
			height: 32px;
			background: #ffffff;
			border: 1px solid #d9d9d9;
			text-align: center;
			line-height: 32px;
			margin-right: 16px;
		}

		.okBTn {
			background: #106ebe;
			color: #fff;
		}
	}

	.table-msg-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: rgba(234, 43, 58, 1);
		font-size: 14px;

		span {
			cursor: pointer;
		}

		.solid {
			width: 1px;
			height: 14px;
			margin: 0 8px;
			cursor: none;
			background: rgba(233, 233, 233, 1);
		}
	}
}

::v-deep .elx-table--empty-placeholder {
	top: 32px !important;
	height: 190px !important;
}

.tr {
	text-align: right;

	::v-deep .el-input__inner {
		text-align: right;

	}
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
// 	background: rgb(233, 236, 237);
// }

// ::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
// 	border: 0 none;
// }

// ::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
// 	box-shadow: none;
// }

// ::v-deep .elx-table .elx-table--border-line {
// 	border-color: #c3c3c3;
// }

// ::v-deep .el-button--text {
// 	background: transparent;
// }

// ::v-deep .elx-table.border--full .elx-body--column,
// .elx-table.border--full .elx-footer--column,
// .elx-table.border--full .elx-header--column {
//   background-image: linear-gradient(#c3c3c3, #c3c3c3),
//     linear-gradient(#c3c3c3, #c3c3c3);
// }</style>
